<script  setup>
import SvgIcon from '@/components/common/svg-icon/index.vue'
import {router} from "@inertiajs/vue3";
import {route} from 'ziggy-js'

defineProps({
    items: {
        type: Array ,
        default: () => [],
    },
    active: {
        type: String,
        default: '',
    }
})

const handleClick = (item) => {
    if (item.params){
        router.visit(route(item.redirect?? item.name?? '', item.params))
    }else{
        router.visit(route(item.redirect?? item.name?? ''))
    }
}
</script>
<template>
    <div class="flex-1 flex flex-col items-center justify-between gap-3 z-4">
        <div
            v-for="item in items"
            :key="item.name"
            :class="{ active: active === item.active }"
            class="navbar-item w-[54px] h-[54px] font-mono flex items-center justify-center flex-col cursor-pointer text-sm text-white gap-1.5 select-none rounded-md"
            @click="handleClick(item)"
        >
            <svg-icon :name="item.icon" class="text-xl" />
            <span class="text-xs">{{ item.title }}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.navbar-item {
    transition:
        background-color 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 1px 1px rgba(0, 0, 0, 0.05);


    &.active,
    &:hover {
        color: #fff;
        background-color: #1890ff;
        backdrop-filter: blur(12px);
        box-shadow:
            0 4px 12px rgba(24, 144, 255, 0.3),  // 主阴影带主题色
            0 2px 8px rgba(0, 0, 0, 0.15);       // 辅阴影增加深度

        filter: drop-shadow(0 0 4px rgba(24, 144, 255, 0.4));
    }
}

//.navbar-item:hover,
//.navbar-item.active {
//    background-color: #1890ff;
//    color: white;
//    transform: translateY(-3px);
//    box-shadow:
//        0 6px 20px rgba(24, 144, 255, 0.4), /* 蓝色光晕 */
//        0 10px 30px rgba(0, 0, 0, 0.25),  /* 外部阴影 */
//        inset 0 2px 4px rgba(255, 255, 255, 0.3); /* 内部高光 */
//
//    transition: all 0.3s ease;
//}
//
///* 悬停时图标放大 */
//.navbar-item:hover i {
//    transform: scale(1.15);
//}
//
///* 活动状态脉冲动画 */
//.navbar-item.active {
//    animation: pulse 2s infinite;
//}
//
//@keyframes pulse {
//    0% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.5); }
//    70% { box-shadow: 0 0 0 12px rgba(24, 144, 255, 0); }
//    100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0); }
//}


//:root {
//    --shadow-color: rgba(24, 144, 255, 0.3);
//    --shadow-blur: 15px;
//    --shadow-spread: 0px;
//    --shadow-x: 0px;
//    --shadow-y: 4px;
//}
//
//.navbar-item {
//    transition: all 0.3s ease;
//    transform: translateY(0);
//
//    &.active,
//    &:hover {
//        color: #fff;
//        background-color: #1890ff;
//        //transform: translateY(-2px);
//
//        // 基础阴影效果
//        box-shadow:
//            var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color),
//                // 顶部微弱的发光效果
//            0 -1px 3px rgba(255, 255, 255, 0.2) inset;
//
//        // 增强立体感的多层次阴影
//        @media (prefers-reduced-motion: no-preference) {
//            box-shadow:
//                var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color),
//                0 -1px 3px rgba(255, 255, 255, 0.2) inset,
//                0 4px 20px rgba(24, 144, 255, 0.15),
//                0 2px 2px rgba(0, 0, 0, 0.05);
//        }
//    }
//}
</style>
